<script setup>
import { memberCollect, memberBrowseHistory } from '@/api/user'
import { getRecommands } from '@/api/detail'
import { useUserStore } from '@/stores/user'
import { ref } from 'vue'
import goDetail from '@/utils/goDetail'
import GoodsCarousel from './components/GoodsCarousel.vue'
import GoodsItem from './components/GoodsItem.vue'
import { lazyApi } from '@/utils/lazy'
import router from '@/router'
const store = useUserStore()

// 获取收藏列表
const collection = ref([])
const params1 = ref({
  collectType: 1
})
const getCollection = async () => {
  const res = await memberCollect(params1.value)
  collection.value = res.data.result.items.slice(0, 4)
}
getCollection()

// 我的足迹
const browseHistory = ref([])
const getHistory = async () => {
  const res = await memberBrowseHistory()
  browseHistory.value = res.data.result.items.slice(0, 4)
}
const { target: historyTarget } = lazyApi(getHistory)

// 猜你喜欢
const likeList = ref([])
const getList = async () => {
  const res = await getRecommands()
  likeList.value = res.data.result
}
const { target: likeTarget } = lazyApi(getList)
</script>

<template>
  <div class="personal">
    <div class="personal__header">
      <div class="user__meta">
        <div class="avatar">
          <img :src="store.userInfo.avatar" alt="头像" />
        </div>
        <div class="name">{{ store.userInfo.nickname }}</div>
      </div>
      <div class="item">
        <div class="item__icon">
          <img src="@/assets/icons/user/vip.png" alt="" />
        </div>
        <div class="item__title">会员中心</div>
      </div>
      <div class="item">
        <div class="item__icon">
          <img src="@/assets/icons/user/setting.png" alt="" />
        </div>
        <div class="item__title">安全设置</div>
      </div>
      <div class="item">
        <div class="item__icon">
          <img src="@/assets/icons/user/address.png" alt="" />
        </div>
        <div class="item__title">地址管理</div>
      </div>
    </div>
    <div class="personal__collection">
      <div class="header">
        <div>我的收藏</div>
        <div class="more" @click="router.push('/user/collect')">
          <span>查看全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <ul class="list">
        <li v-for="item in collection" :key="item.id">
          <GoodsItem
            :name="item.name"
            :picture="item.picture"
            :price="item.price"
            @click="goDetail(item.id)"
          />
        </li>
      </ul>
    </div>
    <div class="personal__collection">
      <div class="header" ref="historyTarget">
        <div>我的足迹</div>
        <div class="more" @click="router.push('/user/feed')">
          <span>查看全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <ul class="list">
        <li v-for="item in browseHistory" :key="item.id">
          <GoodsItem
            :name="item.spu.name"
            :picture="item.spu.picture"
            :price="item.spu.price"
            @click="goDetail(item.spu.id)"
          />
        </li>
      </ul>
    </div>
    <GoodsCarousel ref="likeTarget" :products="likeList" style="margin-bottom: 30px" />
  </div>
</template>

<style lang="scss" scoped>
.personal {
  padding: 0px 5px;
  .personal__header {
    width: 1000px;
    height: 130px;
    margin-bottom: 20px;
    background-color: #3fb399;
    display: flex;
    align-items: center;
    .user__meta {
      width: 400px;
      height: 100%;
      margin-left: 50px;
      display: flex;
      align-items: center;
      .avatar {
        width: 80px;
        img {
          width: 100%;
          border-radius: 100%;
          overflow: hidden;
        }
      }
      .name {
        color: #fff;
        font-size: 18px;
        margin-left: 20px;
      }
    }
    .item {
      margin-left: 100px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      .item__icon {
        width: 35px;
        margin-bottom: 10px;
        img {
          width: 100%;
        }
      }
      .item__title {
        color: #fff;
        font-size: 14px;
        white-space: nowrap;
      }
    }
  }
  .personal__collection {
    width: 940px;
    height: 400px;
    padding: 0px 30px;
    margin-bottom: 20px;
    background-color: #fff;
    .header {
      height: 80px;
      width: 100%;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 20px;
      .more {
        font-size: 15px;
        color: #9b9b9b;
        cursor: pointer;
        &:hover {
          color: #3fb399;
        }
      }
    }
    .list {
      width: 100%;
      list-style: none;
      display: flex;
      justify-content: space-between;
      margin: 0;
      padding: 0;
    }
  }
}
</style>
